<!--本文件由FirstUI授权予关赛川（手机号： 1 5  60  05 1  520 5，身份证尾号：22 6  5 1 9）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
	<view class="fpackageList">
		<!-- 套餐 -->
		<view class="foodContent marin25">
			<view class="food-litm">
				<view class="food-top">
					<image :src="baseOssUrl2 +form.images[0] " mode="aspectFill" class="fd-img"></image>
				</view>
				<view class="food-bottom">
					<view class="itemb-top" @click="goInstruction">
						<view class="it-left">
							<text class="tao-can">{{form.title}}</text>
							<!-- <text class="zhe-kou">5.9折</text> -->
							<text class="zkou-jia-ge">¥{{form.zj}}</text>
						</view>
						<view class="it-right">
							¥{{form.dj}}
						</view>
					</view>
					<view class="itemb-bottom">
						<text class="itb-text">用餐须知</text>
						<text v-if="form.ifZm == 0">周一至周五 10:00～22:00 可用</text>
						<text v-if="form.ifZm == 1">周一至周天 10:00～22:00 可用</text>
						<text v-if="form.ifJjr == 0">(节假日可用)</text>
						<text v-if="form.ifJjr == 1">(节假日不可用)</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 到店吃套餐 -->
		<view class="foodPackEat marin25">
			<view class="eat-title">
				到店吃套餐
			</view>
			<view class="" v-for="(eatItem,eatindex) in form.content" :key="eatindex">
				<view class="food-title">
					{{eatItem.name}}
				</view>
				<view class="food-list">
					<view class="food-item" v-for="(foodItem,index) in eatItem.list" :key='index'>
						<view class="food-left">
							<text>{{foodItem.name}}</text>
							<text class="item-num">（{{foodItem.num}}份）</text>
						</view>
						<view class="food-right">
							￥{{foodItem.price}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 购买须知 -->
		<view class="foodPackTitle marin25">
			购买须知
		</view>
		<view class="foodPackage marin25">
			<view class="foodpack-litm">
				<view class="buy-notes">
					有效期
				</view>
				<view class="">
					下单后{{form.yxq}}日内可使用
				</view>
				<view class="buy-notes">
					使用时间
				</view>
				<view class="">
					{{form.sysj}}小时可用
				</view>
				<view class="buy-notes">
					使用规则
				</view>
				<view class="">
					•{{form.sygz}}
				</view>
			</view>
		</view>
		<!-- 适用商户 -->
		<view class="foodPackBusiness marin25">
			适用商户
		</view>
		<view class="packBusiness marin25">
			<view class="foodpackbu-litm">
				<view class="foodpackbu-top">
					<image :src="baseOssUrl2 + form.headPhone " mode="" class="fd-img"></image>
					<view class="itempack-right">
						<view class="title-cont">
							{{form.mtitle}}
						</view>
						<view class="ratebu-cont">
							<view class="">
								<fui-rate :score=form.zf size='30' disabled></fui-rate>
								<text class="rate-text">{{form.zf?form.zf:" "}}</text>
								<text class="price-pop">¥{{form.pjxf}}/人</text>
							</view>
							<view class="pj-volume" @click="callBnt()">
								<text>联系商家</text>
							</view>
						</view>
						<view class="addres-cont">
							<text class="addres-text">营业中</text>
							<text class="addres-text1">{{form.yysj}}</text>

						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 评分 -->
		<view class="netFriend marin25" @click="userClick">
			<view class="net-text">
				<text class="ntext">套餐评价</text>
				<text class="ntext1">更多评价</text>
			</view>

			<view class="net-content">
				<!-- <view class="content-head marin25">
					<view class="head-left">
						超棒
						<view class="leftpf">
							5.0
						</view>
					</view>
					<view class="head-right">

						<view class="right1" v-for="(item,index) in ringList" :key='index'>
							<circle-progress-bar :pro="item.isPfeng" :start="0" size='100' border_width='5' border_color='#35743D'
							 border_back_color='#DDD' background='#fff' :animate='true'>

							</circle-progress-bar>
							{{item.name}}
							<text class="right-ring">{{item.ringPf}}</text>
						</view>
					</view>
				</view> -->
				<!-- 评论列表 -->
				<view class="content-comment marin25"  v-if="plLists.length != 0">
									<view class="" v-for=" (item,index) in plLists" :key="index">
										<view class="persdata">
											<view class="persdata-left">
												<image style="border-radius: 50%;" :src="baseOssUrl2 + item.tx " mode=""></image>
												<view class="pdata-center">
													{{item.username}}
													<view class="pdata-time">{{item.cjTime}}发表</view>
												</view>
											</view>
											<view class="persdata-right">
												<fui-rate :score=item.xj size='30' disabled></fui-rate>
											</view>
										</view>
										<view class="persdat-details">
											{{item.text}}
										</view>
										<view class="rating-imgs" v-if="item.images.length != 0">
											<image :src="baseOssUrl2 + item1" mode="" v-for="(item1,index1) in item.images" :key='index1'  @click="showGallery(item.images,index1)"></image>
											<fui-gallery :urls="ratingImgs" :show="bigImgshow" @hide="hideGallery"></fui-gallery>
										</view>
									</view>
									<!-- <view class="consumed">
										已消费：超级特惠双人餐username 名
				tx 头像
				cjTime 评论时间
				text 内容 
				xj 打分星级
				images 多图
				
									</view> -->
									<view class="persdat-all">
										全部{{pltotal}}条评价 >
									</view>
								</view>
								<view class="content-comment marin25"  v-if="plLists.length == 0">
									<view class="persdat-all">
										暂无评价
									</view>
								</view>
			</view>
		</view>
		
		<!-- 立即抢购 --> 
		<view class="lookBook"> 
			<view class="lookbtn" @click="bookClick">
				<view class="qiang-gou">
					立即抢购
				</view>
				<view class="zhe-price">
					折后¥{{form.dj}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		baseOssUrl,
		baseOssUrl2
	} from '@/common/settings';
	import circleProgressBar from '@/components/component/circle-progress-bar'
	export default {
		//登录状态
		computed: mapState(['isLogin']),
		data() {
			return {
				plLists:{}, //评价列表
				pltotal:'',
				id:'',
				midss:'',
				form:'', // 详情
				baseOssUrl: baseOssUrl,
				baseOssUrl2:baseOssUrl2,
				rateNum: '', //评分
				ringList: [{
						name: '位置',
						ringPf: '5.0',
						isPfeng: 1
					},
					{
						name: '设施',
						ringPf: '4.8',
						isPfeng: 0.8
					},
					{
						name: '服务',
						ringPf: '4.8',
						isPfeng: 0.8
					},
					{
						name: '卫生',
						ringPf: '4.8',
						isPfeng: 0.8
					},
				],
				eatList: [{
					name: "·特色美食",
					foodItemList: []
				}, {
					name: "·清爽饮品",
					foodItemList: []
				}]
			}
		},
		onLoad(e) {
			// if (!this.isLogin) {
			// 	uni.navigateTo({
			// 		url: '../login/index'
			// 	})
			// }
			this.midss = e.mid
			this.id = e.id
			this.getDetails()
			this.plList()
		},
		components: {
			circleProgressBar
		},
		methods: {
			...mapMutations(['login', 'logout']),
			// 获取详情
			getDetails() {
				this.$http.get(this.$httpApi.queryById, {
					data: {
						 id: this.id
					}
				}).then(res => {
					if (res.code == 0) {
						this.form = res.catering
						var add = res.catering.content.replace(/'/g, '"')
						this.form.content = JSON.parse(add)
						
						var arr = [];
						arr  = this.form.images.split(',')
						this.form.images = arr
						// this.form.content.forEach(item=>{
						// 	item = JSON.parse(item)
						// })
					}
				})
			},
			callBnt() {
				uni.makePhoneCall({
					phoneNumber: this.form.mphone //仅为示例
				});
			},
			// 评价列表
			plList() {
				this.$http.get(this.$httpApi.plList, {
					data: {
						 mId: this.midss,
						 page:1,
						 limit: 5
					}
				}).then(res => {
					if (res.code == 0) {
						this.plLists = res.page
						this.plLists.forEach(item=>{
							if(item.images) {
								console.log(item,'itemitemitem')
								var arr = [];
								arr  = item.images.split(',')
								console.log(arr,'aaaaaarrrrrr')
								item.images = arr
							}
							
						})
						this.pltotal = res.total
					}
					// if (res.code == 0) {
					// 	this.plLists = res.page[0]
					// 	var arr = [];
					// 	arr  = res.page[0].images.split(',')
					// 	this.plLists.images = arr
					// 	console.log(this.plLists.image)
					// 	this.pltotal = res.total
					// }
				})
			},
			// 立即抢购页面
			bookClick(){
				uni.navigateTo({
					url: "/pages/foodOrder/index?id=" + this.form.id
				})
			},
			// goInstruction去商品价格和销量说明页
			goInstruction() {
				uni.navigateTo({
					url: "/pages/instructions/index"
				})
			},
			// 去套餐详情
			packgeDetails() {
				uni.navigateTo({
					url: "/pages/userrating/index"
				})
			},
			// 用户评价
			userClick() {
				uni.navigateTo({
					url: "/pages/userrating/index?id=" + this.id
				})
			},
			// 评分
			rateChange(e) {
				//返回评分 e.score
				console.log(e)
				this.rateNum = e.score
			},
			goSearch(e) {
				console.log('eee', e)
				// 	uni.navigateTo({
				// 		url: "/pages/searchList/index?num=2"
				// 	})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fpackageList {
		height: 100%;
		padding-bottom: 150rpx;
		.searchHeader {
			background: #FFFFFF;
		}

		.searchTab {
			background: #FFFFFF;
		}

		.foodContent {
			margin-top: 26rpx;

			.food-litm {
				background-color: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 30rpx;
				padding: 24rpx;

				.food-top {
					.fd-img {
						width: 100%;
						height: 300rpx;
					}

				}

				.food-bottom {
					margin-top: 25rpx;

					.itemb-top {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.it-left {
							.tao-can {
								font-size: 30rpx;
								font-weight: bold;
							}

							.zhe-kou {
								font-size: 24rpx;
								color: #35743D;
								padding: 3rpx 5rpx;
								border: 1px solid #35743D;
								margin: 0 10rpx 0 16rpx;
							}

							.zkou-jia-ge {
								color: #B4B4B4;
								font-size: 26rpx;
								text-decoration:line-through;
							}
						}

						.it-right {
							color: #D93C3C;
							font-size: 30rpx;
							font-weight: bold;
						}
					}

					.itemb-bottom {
						color: #969696;
						font-size: 24rpx;
						margin: 20rpx 0 10rpx;

						.itb-text {
							margin-right: 10rpx;
						}
					}
				}


			}
		}

		//到店吃套餐
		.foodPackEat {
			background-color: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 30rpx;
			padding: 5rpx 24rpx 24rpx;
			font-size: 28rpx;
			line-height: 50rpx;

			.eat-title {
				font-size: 30rpx;
				font-weight: bold;
			}

			.food-title {
				font-size: 28rpx;
				font-weight: bold;
				margin-top: 24rpx;
			}

			.food-list {

				.food-item {
					display: flex;
					justify-content: space-between;

					.food-left {
						font-size: 28rpx; 
						.item-num {
							font-size: 26rpx;
							color: #989898;
						}
					}

					.food-right {
						font-size: 30rpx;
						// font-weight: bold;
					}
				}
			}
		}

		// 购买须知 
		.foodPackTitle {
			font-size: 32rpx;
			font-weight: bold;
		}

		.foodPackage {
			margin-top: 26rpx;

			.foodpack-litm {
				background-color: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 30rpx;
				padding: 5rpx 24rpx 24rpx;
				font-size: 28rpx;

				.buy-notes {
					font-weight: bold;
					margin: 15rpx 0 10rpx;
				}

			}

		}

		// 适用商户
		.foodPackBusiness {
			font-size: 32rpx;
			font-weight: bold;
		}

		.packBusiness {
			margin-top: 26rpx;

			.foodpackbu-litm {
				background-color: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 30rpx;
				padding: 24rpx;
				font-size: 28rpx;

				.foodpackbu-top {
					display: flex;
					padding-bottom: 10rpx;
					margin-bottom: 10rpx;

					.fd-img {
						width: 170rpx;
						height: 170rpx;
					}

					.itempack-right {
						width: 72%;
						margin-left: 24rpx;
						line-height: 50rpx;

						.title-cont {
							font-size: 28rpx;
							font-weight: bold;
						}

						.ratepack-cont {
							color: #969696;
							font-size: 24rpx;
							display: flex;
							justify-content: space-between;
						}

						.addres-cont {
							color: #969696;

							.addres-text {
								margin-right: 15rpx;
							}
						}

						// 评价
						.ratebu-cont {
							color: #969696;
							font-size: 24rpx;
							display: flex;
							justify-content: space-between;

							.pj-volume {
								padding: 5rpx 10rpx;
								border: 1px solid #35743D;
								color: #35743D;

							}

							.rate-text {
								color: #EDBD0B;
								margin: 0 16rpx;
							}
						}
					}
				}
			}
		}

		// 评价
		.netFriend {
			padding-bottom: 30rpx;

			.net-text {
				display: flex;
				justify-content: space-between;
				font-size: 32rpx;
				color: #1D1D1D;
				margin: 40rpx 0 16rpx 0;
				font-weight: bold;

				.ntext1 {
					font-size: 26rpx;
				}
			}

			.net-content {
				background: #FFFFFF;
				padding-top: 5rpx;
				border-radius: 16rpx;
				padding-bottom: 20rpx;

				.content-head {
					background-color: #EFEFEF;
					height: 160rpx;
					border-radius: 16rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #35743D;

					.head-left {
						border-right: 1px solid #B4B4B4;
						width: 20%;
						text-align: center;
						font-size: 24rpx;

						.leftpf {
							font-size: 38rpx;
							font-weight: bold;
						}
					}

					.head-right {
						width: 80%;
						height: 100%;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						color: #35743D;
						font-size: 24rpx;
						margin-left: 40rpx;

						.right1 {
							text-align: center;
							position: relative;
							margin-right: 20rpx;

							.right-ring {
								position: absolute;
								right: 30rpx;
								top: 38rpx;
								font-size: 28rpx;
							}


						}
					}
				}

				.content-comment {
					.persdata {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin: 60rpx 0 20rpx 0;  
						.persdata-left{
							display: flex; 
							image {
								width: 100rpx;
								height: 100rpx;
								margin-right: 16rpx;
							}
							
							.pdata-center {
								color: #1D1D1D;
							
								.pdata-time {
									color: #969696;
								}
							
							}
						}
					}
				
					.persdat-details {
						margin: 20rpx 0 40rpx 0;
						font-size: 28rpx;
						color: #1D1D1D;
					}
				
					.consumed {
						color: #7E7E7D;
						margin-bottom: 20rpx;
						font-size: 26rpx;
					}
				
					.persdat-all {
						margin-top: 20rpx;
						text-align: center;
						color: #35743D;
						font-size: 26rpx;
						padding: 10rpx 0;
					}
				}
			}
		}
		// 立即抢购按钮
		// 查看房型 暂时取消掉
		.lookBook {
			background: #FFFFFF;
			width: 100%;
			height: 120rpx;
			position: fixed;
			bottom: 0rpx;
			// right: 32rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			z-index: 999;
			font-size: 28rpx; 
		
			.lookbtn {
				color: #FFFFFF;
				height: 72rpx;
				background-color: #35743D;
				border-radius: 38rpx; 
				text-align: center;
				// line-height: 72rpx;
				margin: 0 20rpx;
				padding: 3rpx 68rpx;
				.qiang-gou{
					font-size: 24rpx;
				}
				.zhe-price{
					margin-top: 5rpx;
					font-size: 18rpx;
				}
			}
		}
	}
</style>
